<template>
  <!---------------------------------------------商品信息--------------------------------------------------->
  <el-form ref="orderMemberForm" :model="form" :inline="true" :rules="formRules" label-width="120px" label-position="right">
    <div class="common-form-table-wrapper">
      <el-divider content-position="left">商品信息</el-divider>
      <el-row class="common-form-table-button-container">
        <el-button icon="el-icon-plus" @click="addOrderMember">新增商品</el-button>
        <el-button icon="el-icon-sold-out" @click="showImportItemDialog">导入商品</el-button>
      </el-row>
      <!--商品列表-->
      <el-table :data="form.members" highlight-current-row max-height="360px" show-summary :summary-method="getSummaries" class="common-form-table">
        <el-table-column type="index" label="序号" fixed width="35" />
        <el-table-column label="操作" fixed width="35">
          <template slot-scope="scope">
            <el-link icon="el-icon-delete" :underline="false" @click="deleteMember(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="商品型号" prop="model" width="150">
          <template slot="header">
            <span class="required-header">商品型号</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.model'" :rules="formRules.model">
              <el-autocomplete
                v-model.trim="scope.row.model"
                placeholder="按型号查询"
                popper-class="common-autocomplete"
                :fetch-suggestions="(queryString, cb) => queryItem(queryString, cb, 'model')"
                @select="(item) => selectCommodity(item, scope.$index)"
              >
                <template slot-scope="{ item }">
                  <div class="select-title">{{ item.model }}</div>
                  <span class="select-other">
                    {{ item.name }}
                    <el-divider direction="vertical" />
                    {{ item.brand }}
                    <el-divider direction="vertical" />
                    {{ item.unit }}
                    <el-divider direction="vertical" />
                    {{ item.origin }}
                  </span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" width="150">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.name'">
              <el-autocomplete
                v-model.trim="scope.row.name"
                placeholder="按名称查询"
                popper-class="common-autocomplete"
                :fetch-suggestions="(queryString, cb) => queryItem(queryString, cb, 'name')"
                @select="(item) => selectCommodity(item, scope.$index)"
              >
                <template slot-scope="{ item }">
                  <div class="select-model">{{ item.name }}</div>
                  <span class="select-other">
                    {{ item.model }}
                    <el-divider direction="vertical" />
                    {{ item.brand }}
                    <el-divider direction="vertical" />
                    {{ item.unit }}
                    <el-divider direction="vertical" />
                    {{ item.origin }}
                  </span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="商品品牌" prop="brand" width="150">
          <template slot="header">
            <span class="required-header">商品品牌</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.brand'" :rules="formRules.brand">
              <el-autocomplete
                v-model.trim="scope.row.brand"
                placeholder="按品牌查询"
                popper-class="common-autocomplete"
                :fetch-suggestions="(queryString, cb) => queryItem(queryString, cb, 'brand')"
                @select="(item) => selectCommodity(item, scope.$index)"
              >
                <template slot-scope="{ item }">
                  <div class="select-model">{{ item.brand }}</div>
                  <span class="select-other">
                    {{ item.model }}
                    <el-divider direction="vertical" />
                    {{ item.name }}
                    <el-divider direction="vertical" />
                    {{ item.unit }}
                    <el-divider direction="vertical" />
                    {{ item.origin }}
                  </span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" width="80">
          <template slot="header">
            <span class="required-header">单位</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.unit'" :rules="formRules.unit">
              <el-select v-model.trim="scope.row.unit" filterable clearable>
                <el-option v-for="item in $store.getters.dictSelectData.escm_unit" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="qty" width="100">
          <template slot="header">
            <span class="required-header">数量</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.qty'" :rules="formRules.qty">
              <el-input-number v-model.trim="scope.row.qty" :controls="false" @change="(currentValue, oldValue) => calculatePrice(scope, false)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price" width="100">
          <template slot="header">
            <span class="required-header">单价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.price'" :rules="formRules.price">
              <el-input-number v-model.trim="scope.row.price" :controls="false" @change="(currentValue, oldValue) => calculatePrice(scope, false)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="120">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.totalPrice'">
              <el-input-number v-model.trim="scope.row.totalPrice" :controls="false" @change="(currentValue, oldValue) => calculatePrice(scope, true)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="产地" prop="origin" width="80">
          <template slot="header">
            <span class="required-header">产地</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.origin'" :rules="formRules.origin">
              <el-select v-model.trim="scope.row.origin" filterable clearable>
                <el-option v-for="item in $store.getters.dictSelectData.escm_origin_country" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="特许权" prop="involveRoyalty" width="80">
          <template slot="header">
            <el-tooltip slot="label" effect="light" content="如涉及特许权费另行支付，需在支付给供应商后30天内完成向海关申报缴税">
              <span class="required-header"><i class="el-icon-question theme-color" />特许权</span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.involveRoyalty'" :rules="formRules.involveRoyalty">
              <el-select v-model.trim="scope.row.involveRoyalty" filterable clearable>
                <el-option v-for="item in $store.getters.dictSelectData.boolean_select" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="净重(KG)" prop="nw">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.nw'">
              <el-input-number v-model.trim="scope.row.nw" :controls="false" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="毛重(KG)" prop="gw">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.gw'">
              <el-input-number v-model.trim="scope.row.gw" :controls="false" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="物料号" prop="pn">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.pn'">
              <el-input v-model.trim="scope.row.pn" clearable />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="PO号" prop="poNo">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.poNo'">
              <el-input v-model.trim="scope.row.poNo" clearable />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="件数" prop="packages">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.packages'">
              <el-input-number v-model.trim="scope.row.packages" :controls="false" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="供应商发票号" prop="supplierInvoiceNo" width="90">
          <template slot-scope="scope">
            <el-form-item :prop="'members.' + scope.$index + '.supplierInvoiceNo'">
              <el-input v-model.trim="scope.row.supplierInvoiceNo" clearable />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>

      <!--导入明细窗口-->
      <TemplateImport ref="importMemberDialog" title="批量上传产品" :baba="this" template-file-id="1356171993041108993" />
    </div>
  </el-form>
</template>

<script>
import { materialList } from '@/api/hfy/escm'
import { divide, mul, add } from '@/utils/calculate'
import TemplateImport from '@/components/TemplateImport'
import { getDictSelectData } from '@/utils/common'
export default {
  name: 'BookingOrderMember',
  components: { TemplateImport },
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // form: {
      //   // 商品信息
      //   members: []
      // },
      // 订单明细合计
      totalQty: 0, totalPrice: 0,
      formRules: {
        model: [{ required: true, message: '型号必填', trigger: 'change' }],
        brand: [{ required: true, message: '品牌必填', trigger: 'change' }],
        unit: [{ required: true, message: '单位必选', trigger: 'change' }],
        qty: [{ required: true, message: '数量必填', trigger: 'blur' }],
        price: [{ required: true, message: '单价必填', trigger: 'blur' }],
        origin: [{ required: true, message: '产地必选', trigger: 'change' }],
        involveRoyalty: [{ required: true, message: '特许权必选', trigger: 'change' }]
      }
    }
  },
  created() {
    // 单位下拉
    getDictSelectData('escm_unit')
    // 产地下拉
    getDictSelectData('escm_origin_country')
  },
  methods: {
    // 添加商品
    addOrderMember() {
      this.form.members.push({
        model: '', name: '', unit: '', price: undefined, qty: undefined, totalPrice: undefined,
        brand: '', origin: '', packages: undefined, pn: '', nw: undefined,
        gw: undefined, poNo: '', involveRoyalty: undefined
      })
    },
    // 根据key查询商品
    queryItem(queryString, cb, key) {
      setTimeout(() => {
        materialList({ keyword: queryString, page: 1, size: 10 }).then(res => {
          // 调用 callback 返回建议列表的数据
          cb(res)
        }).catch(() => cb([]))
      }, 350)
    },
    // 选择查询出来的商品
    selectCommodity(item, index) {
      this.form.members[index].model = item.model
      this.form.members[index].name = item.name
      this.form.members[index].brand = item.brand
      this.form.members[index].unit = item.unit
      this.form.members[index].origin = item.origin
    },
    // 自动计算 总价 = 单价 * 数量
    calculatePrice(scope, changeTotalPrice) {
      const price = scope.row.price
      const totalPrice = scope.row.totalPrice
      const qty = scope.row.qty
      if (changeTotalPrice) {
        if (qty) {
          scope.row.price = divide(totalPrice, qty)
        }
      } else {
        if (price && qty) {
          scope.row.totalPrice = mul(qty, price)
        }
      }
    },
    // 批量上传产品弹出框
    showImportItemDialog() {
      this.$refs.importMemberDialog.show()
    },
    // 删除商品明细
    deleteMember(item) {
      const members = this.form.members
      var index = members.indexOf(item)
      if (index !== -1) {
        members.splice(index, 1)
      }
    },
    // 商品合计
    getSummaries(param) {
      const { data } = param
      const sums = []
      let totalPrice = 0
      let qty = 0
      if (!data || data.length === 0) {
        return sums
      }
      // 合计数量总价
      data.map(item => {
        totalPrice = add(totalPrice, item.totalPrice)
        qty = add(qty, item.qty)
      })
      sums[0] = '合'
      sums[1] = '计'
      sums[6] = qty
      sums[8] = totalPrice
      this.totalPrice = totalPrice
      this.totalQty = qty
      // 更新总金额
      this.$emit('update:totalPrice', totalPrice)
      return sums
    },
    self() {
      return this.$refs.orderMemberForm
    }
  }
}
</script>
